<!DOCTYPE html>
<html>
	<head>
		<title>bola 1</title>
			<style>
				input: valid{ background:green;}
				input: invalid { background: red;}
				
				form {
					width: 330px;
					margin: 20px;
					background-color: #b10515;
					padding: 20px;
				}
			</style>
			
			<script type="text/javaScript">
				
				var boxx = 20;//ponto inicial x da caixa
				var boxy = 30;//ponto inicial y da caixa
				var boxwidth = 350;
				var boxheight = 250;
				var ballrad = 10; //raio da bola
				
				var boxboundx = boxwidth + boxx - ballrad; // parede direita
				var boxboundy = boxheight + boxy - ballrad; // parede inferior
				
				var inboxboundx = boxx + ballrad;          // parede esquerda 
				var inboxboundy = boxy + ballrad;		   // parede superior
				
				var ballx = 50; //posiçao inicial da bola no eixo x
				var bally = 50; //posição inicial da bola no eixo y
				
				var ctx;
				
				var ballvx = 4; // tamanho do passo inicial x 
				var ballvy = 8; // tamanho do passo inicial y 
				
				var img = new Image();//cria o objeto imagem, para usarmos uma imagem
				
				img.src = "bilhar.jpg";// pega uma imagem de bola invés de pintá-la
				
				var grad;	// seta a variável para criar um gradiente na borda
				
				var cor; // criada para ser usado junto com o gradiente
				 			
				function init(){ 
					
					ctx = document.getElementById("canvas").getContext('2d'); //inicializa a variável ctx
					
					ctx.lineWidth = ballrad;	//largura da linha
					
					ctx.fillStyle = "rgb(200,0,50)"; // preenche a bola
					
					moveBola();	
					
					setInterval(moveBola, 100); //inicializa a passagem do tempo
				
				}
				
				function moveBola(){
					
					ctx.clearRect(boxx, boxy, boxwidth, boxheight); //apaga a bola da caixa
					
					moveVerifica(); // Realiza a verificação e move a bola
					
					ctx.beginPath();
					
					ctx.arc(ballx, bally, ballrad, 0, 2*Math.PI, true); //desenha a bola
					
					ctx.fill();// pinta a bola
					
					ctx.strokeRect(boxx, boxy, boxwidth, boxheight);//desenha um retângulo
				}
				
				function moveVerifica(){
					
					var nballx = ballx + ballvx; // calcula a posiçao seguinte em x
					var nbally = bally + ballvy; // e em y
					
					//verifica se a bola atravessou a parede direita
					if(nballx > boxboundx){
							
						ballvx = -ballvx; //se sim, muda a posição vertical da bola
						nballx = boxboundx; //seta a nova posição horizontal para ser exatamente na fronteira
					}
					//verifica se a bola parou antes da fronteira direita
					if(nballx < inboxboundx){
						
						nballx = inboxboundx;  //seta a nova posição horizontal para ser exatamente na fronteira
						ballvx = -ballvx; // muda a posição veritcal da bola	
					}
					//verifica se está além da parede inferior
					if(nbally > boxboundy){
						
						nbally = boxboundy;
						ballvy = -ballvy;
					}
					//verifica se a bola parou antes da fronteira superior
					if(nbally< inboxboundy){
						
						nbally = inboxboundy;  //seta a nova posição horizontal para ser exatamente na fronteira
						ballvy = -ballvy;
					}
					
					ballx = nballx; //muda a posição x para nballx
					bally = nbally; //muda a posição y para nbally
				}
				
				function mudar(){
					
					ballvx = Number(bola.velHoriz.value);// pega o valor digitado no form
					ballvy = Number(bola.velVert.value);
					
					return false;
					}
			</script>
			
	</head>
	<body onload="init();">
		<canvas name = "canvas" id = "canvas" width= "400" height="300">
			Your browser doesn't support canvas
		</canvas>
		<form action="self " name="bola" id="bola" onSubmit="return mudar();" >
				Velocidade Horizontal:<input name="velHoriz" id="velHoriz" value="4" type="number" min="-10" max="10" />
				<br />
				Velocidade Vertical:<input name="velVert" id="velVert" value="8" type="number" min="-10" max="10" />
				<br />
				<input type="submit" value="Mudar" />
		</form>
	</body>
</html>